/*color颜色相关*/

/*c1-9 主题色*/
/*c11-19 文本（黑）*/


/*c1-9 变量定义不能有数字1-9改成abcdefg*/
body{
    --c-a:#c90000;/*c1*/
    --c-b:#f10000;/*c2*/
    --c-c:#ead058;/*c3*/

    --c-aa:#727270;/*c11*/
    --c-ab:#c3cad2;/*c12*/
    --c-ac:#eeeff3;/*c13*/
}
a{
    color: #c90000;
}

/*****************************start**************************/
.white{color: #FFF;}
.black{color: #111;}
.red{color: #CC2222;}
.c0{color: #111;}
.cf{color: #EFEFEF;}
.bc0{background-color: #000000;}
.bcf{background-color: #FFFFFF;}

.c1{color: #c90000;}/*用户界面插画，文字加深*/
.c2{color: #f10000;}/*顶部导航*/
.c3{color: #ead058;}/*用户界面插画，普通文字*/

.c11{color: #191919;}
.c12{color: #9f9f9f;}
.c13{color:#f5f5f5;}

.bc1{ background-color: #c90000;}
.bc2{ background-color: #f10000;}
.bc3{ background-color:#ead058;}

.bc11{ background-color: #191919;}
.bc12{ background-color: #9f9f9f;}
.bc13{ background-color:#f5f5f5;}

.bca001{background-color: rgba(0,0,0,0.01);}
.bca002{background-color: rgba(0,0,0,0.02);}
.bca003{background-color: rgba(0,0,0,0.03);}
.bca004{background-color: rgba(0,0,0,0.04);}
.bca005{background-color: rgba(0,0,0,0.05);}
.bca006{background-color: rgba(0,0,0,0.06);}
.bca007{background-color: rgba(0,0,0,0.07);}
.bca008{background-color: rgba(0,0,0,0.08);}
.bca009{background-color: rgba(0,0,0,0.09);}
.bca01{background-color: rgba(0,0,0,0.1);}
.bca02{background-color: rgba(0,0,0,0.2);}
.bca03{background-color: rgba(0,0,0,0.3);}
.bca04{background-color: rgba(0,0,0,0.4);}
.bca05{background-color: rgba(0,0,0,0.5);}
.bca06{background-color: rgba(0,0,0,0.6);}
.bca07{background-color: rgba(0,0,0,0.7);}
.bca08{background-color: rgba(0,0,0,0.8);}
.bca09{background-color: rgba(0,0,0,0.9);}

.bcaf1{background-color: rgba(255,255,255,0.1);}
.bcaf2{background-color: rgba(255,255,255,0.2);}
.bcaf3{background-color: rgba(255,255,255,0.3);}
.bcaf4{background-color: rgba(255,255,255,0.4);}
.bcaf5{background-color: rgba(255,255,255,0.5);}
.bcaf6{background-color: rgba(255,255,255,0.6);}
.bcaf7{background-color: rgba(255,255,255,0.7);}
.bcaf8{background-color: rgba(255,255,255,0.8);}
.bcaf9{background-color: rgba(255,255,255,0.9);}

.bdc1{border-color: #c90000!important;}
.bdc2{border-color: #f10000!important;}
.bdc3{border-color: #ead058!important;}
.bdc11{border-color: #191919!important;}
.bdc12{border-color: #9f9f9f!important;}
.bdc13{border-color: #f5f5f5!important;}
/*****************************end**************************/


.c01{color:#66c488}
.c02{color:#ff7947}
.c03{color:#f3c142}
.c04{color:#638be8}
.c05{color:#67c2cd}
.c06{color:#93d282}
.c07{color:#eb6d7e}

.bc01{background-color:#66c488}
.bc02{background-color:#ff7947}
.bc03{background-color:#f3c142}
.bc04{background-color:#638be8}
.bc05{background-color:#67c2cd}
.bc06{background-color:#93d282}
.bc07{background-color:#eb6d7e}

.bdc01{border-color:#66c488!important}
.bdc02{border-color:#ff7947!important}
.bdc03{border-color:#f3c142!important}
.bdc04{border-color:#638be8!important}
.bdc05{border-color:#67c2cd!important}
.bdc06{border-color:#93d282!important}
.bdc07{border-color:#eb6d7e!important}



::-webkit-input-placeholder{
    color:#191919;
    font-size: 0.85rem;
}

.jb01{
    background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
}
.jb02{
    background-image: linear-gradient(160deg, #81fbb8 20%,#28c76f 80%);
}
.jb03{
    background-image: linear-gradient(160deg, #90f7ec 20%,#32ccbc 80%);
}
.jb04{
    background-image: linear-gradient(160deg, #3c8ce7 20%,#00eaff 80%);
}
.jb05{
    background-image: linear-gradient(160deg, #feb692 20%,#ea5455 80%);
}
.jb06{
    background-image: linear-gradient(160deg, #abdcff 20%,#0396ff 80%);
}
.jb06{
    background-image: linear-gradient(160deg, #fdeb71 20%,#f8d800 80%);
}

.shadow1 {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.shadow2 {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}

.shadow3 {
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.6);
}

.shadow4 {
    box-shadow: 1px 1px 24px rgba(0, 0, 0, 0.6);
}

.shadow5 {
    box-shadow: 1px 1px 48px rgba(0, 0, 0, 0.6);
}


/*透明度相关*/
/*****************************start**************************/
.op0 {
    opacity: 0;
}

.op1 {
    opacity: 0.1;
}

.op2 {
    opacity: 0.2;
}

.op3 {
    opacity: 0.3;
}

.op4 {
    opacity: 0.4;
}

.op5 {
    opacity: 0.5;
}

.op6 {
    opacity: 0.6;
}

.op7 {
    opacity: 0.7;
}

.op8 {
    opacity: 0.8;
}

.op9 {
    opacity: 0.9;
}

/*****************************end****************************/

.color1 {
    background: rgb(255, 0, 0);
}

.color2 {
    background: rgb(0, 153, 255);
}

.color3 {
    background: rgb(255, 153, 51);
}

.color4 {
    background: rgb(51, 102, 204);
}

.color5 {
    background: rgb(255, 51, 204);
}

.color6 {
    background: rgb(255, 102, 51);
}

.color7 {
    background: rgb(255, 102, 255);
}

.color8 {
    background: rgb(51, 153, 51);
}

.color9 {
    background: rgb(255, 0, 51);
}

.color10 {
    background: rgb(0, 204, 102);
}


/*形状相关*/
/*****************************start**************************/
.list-style-1 {
    border-left: 0.2rem solid rgb(51, 102, 204);
    padding-left: 0.5rem;
}

.list-style-2 {
    border-left: 0.2rem solid #DDD;
    padding-left: 0.5rem;
}

.circle1 {
    width: 1vw;
    height: 1vw;
    border-radius: 100%;
}

.circle2 {
    width: 2vw;
    height: 2vw;
    border-radius: 100%;
}

.circle3 {
    width: 3vw;
    height: 3vw;
    border-radius: 100%;
}

.circle4 {
    width: 4vw;
    height: 4vw;
    border-radius: 100%;
}

.circle5 {
    width: 5vw;
    height: 5vw;
    border-radius: 100%;
}

.circle6 {
    width: 6vw;
    height: 6vw;
    border-radius: 100%;
}

.circle7 {
    width: 7vw;
    height: 7vw;
    border-radius: 100%;
}

.circle8 {
    width: 8vw;
    height: 8vw;
    border-radius: 100%;
}

.circle9 {
    width: 9vw;
    height: 9vw;
    border-radius: 100%;
}

.circle10 {
    width: 10vw;
    height: 10vw;
    border-radius: 100%;
}

/*****************************end**************************/

/*滤镜*/
.image-grayscale {
    filter: grayscale(100%)
}

.image-saturate {
    filter: saturate(360%)
}

.image-sepia {
    filter: sepia(100%)
}

.image-invert {
    filter: invert(100%)
}

.image-opacity {
    filter: opacity(50%)
}

.image-brightness {
    filter: brightness(120%)
}

.image-contrast {
    filter: contrast(160%)
}

.image-hue-rotate {
    filter: hue-rotate(160deg)
}

.image-blur {
    filter: blur(2px)
}


.click {
    position: relative;
    overflow: hidden;
}

.click:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 10%, transparent 20%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 1s, opacity 1s;
}

.click:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}


.ripple {
    opacity: 1.0;
}
.ripple:active {
    opacity: 0.8;
}

/*图片背景相关*/
.rndbg0{background-color:#ffd6d6; }
.rndbg1{background-color:#ffead6; }
.rndbg2{background-color:#fffed6; }
.rndbg3{background-color:#eeffd6; }
.rndbg4{background-color:#ddffd6; }
.rndbg5{background-color:#d6ffef; }
.rndbg6{background-color:#d6f1ff; }
.rndbg7{background-color:#dbd6ff; }
.rndbg8{background-color:#f8d6ff; }
.rndbg9{background-color:#ffd6e3; }